import React from 'react';
import { connect } from 'dva';
import _ from 'lodash';
import { Table, Button, Popconfirm } from 'antd';
import Editor from './edit';
import Editor2 from './baseEdit';
import common from '../common.less';

function EventList(props) {
    const { dispatch, event } = props;
    const { data, editorData, base } = event;
    const onEditorData = (data) => {
        if (!_.isEmpty(data)) {
            data.val1 = parseInt(data.val1, 10);
            data.val2 = parseInt(data.val2, 10);
        }
        dispatch({
            type: 'event/editorVisible',
            payload: { editorData: data },
        });
    };
    const onEditorData2 = () => {
        dispatch({
            type: 'event/setState',
            payload: {
                editBase: true,
            },
        });
    };
    const onRemoveData = (rechargeId) => {
        dispatch({
            type: 'event/removeData',
            rechargeId,
        });
    };
    const columns = [
        {
            title: '名称',
            key: 'name',
            render: (t, { val1, val2 }) => `充${val2}元送${val1}元`,
        },
        {
            title: '类型',
            key: 'modelName',
            dataIndex: 'modelName',
        },
        {
            title: '标准充值(元)',
            key: 'val2',
            dataIndex: 'val2',
        },
        {
            title: '增值(元)',
            key: 'val1',
            dataIndex: 'val1',
        },
        /*
        {
            title: '状态',
            key: 'status',
            dataIndex: 'status',
            render: (t) => <StatusSwitch status={t} />,
        }, */
        {
            title: '操作',
            render: (t, r) => {
                return (
                    <div>
                        <a onClick={onEditorData.bind(null, r)}>编辑</a>
                        <span className="ant-divider" />
                        <Popconfirm
                            title="您要删除码?"
                            okText="删除"
                            cancelText="取消"
                            onConfirm={onRemoveData.bind(null, r.id)}
                        >
                            <a>删除</a>
                        </Popconfirm>
                    </div>
                );
            },
        },
    ];
    const editProps = {
        name: '营销活动管理',
        ns: 'event',
        isNew: _.isEmpty(editorData),
        dispatch,
    };
    return (
        <div className={common.normalWrap}>
            <div className={common.buttonWrap}>
                <Button type="primary" onClick={onEditorData.bind(null, {})}>添加收费类型</Button>
                {_.isEmpty(base) ?
                    (<Button
                        type="danger"
                        icon="plus"
                        onClick={onEditorData2.bind(null, {})}
                    >
                        添加基础收费配置
                    </Button>) :
                    (<Button
                        type="danger"
                        icon="edit"
                        onClick={onEditorData2.bind(null, base)}
                    >
                        修改基础收费配置: {base.val1}分钟/{base.val2}元/1次
                    </Button>)
                }
            </div>
            <div className={common.table}>
                <Table
                    rowKey="id"
                    columns={columns}
                    dataSource={data}
                />
                <Editor {...{ ...event, ...editProps }} />
                <Editor2 {...props} />
            </div>
        </div>
    );
}

function mapStateToProps({ event }) {
    return {
        event,
    };
}

export default connect(mapStateToProps)(EventList);
